<template>
    <fieldset>
        <legend>页面切换</legend>
        <h1 id="msg" ref="hh">{{msg}}</h1>
        <button v-for="(item,index) in btns" :key="index+1" @click="check(index+1)" :class="{active:index+1===bttn}">第{{index+1}}页</button>
    </fieldset>
</template>
<script setup>
import {ref,onMounted, watchEffect} from 'vue'
import cancelPromise from '../cancelPromise'
    let btns = ref(['第一页','第二页','第三页'])
    let btn1 = signal=>new cancelPromise ((resolve,reject)=>{
        setTimeout(() => {
            resolve('第一页内容')
        }, 1000);
    },signal)
    let btn2 = signal=>new cancelPromise ((resolve,reject)=>{
        setTimeout(() => {
            resolve('第二页内容')
        }, 2000);
    },signal)
    let btn3 = signal=>new cancelPromise ((resolve,reject)=>{
        setTimeout(() => {
            resolve('第三页内容')
        }, 3000);
    },signal)
    let obj = {
        btn1,
        btn2,
        btn3
    }
    let bttn = ref(1)
    let msg = ref('')
    let check = function(a){
        // packagePromise(a)
        bttn.value = a
    }
    let packagePromise = (a=1,signal)=>{
       return  obj['btn'+a](signal)
        .then(res=>{
            msg.value=res
        })
    }
    
    let hh=ref()

    watchEffect(invalidate => {
        let abortController = new AbortController()
        let signal = abortController.signal;
        packagePromise(bttn.value,signal)
        invalidate(()=>{
            abortController.abort()
        })
    })
    watchEffect(()=>{
        console.log(hh.value);
    },{
        flush:'pre'
    })



</script>
<style>
    .active{
        background-color: aqua;
    }

</style>